<%--
  Created by IntelliJ IDEA.
  User: css
  Date: 2018/7/4
  Time: 8:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <style type="text/css">
        .section_div{
            width: 300px;
            margin-top: 50px;
            margin-left: 50px;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript">
        function submitSection(){
            var text=document.getElementById("addSectionText");
            var flag=false;
            $.ajax({
                "async":false,
                "url":"${pageContext.request.contextPath}/section",
                "data":{"sname":text.value,"methodName":"addSection"},
                "type":"POST",
                "dataType":"json",
                "success":function(data){
                    if(data.success){
                        var nli=document.createElement("li");

                        $(nli).addClass("list-group-item");
                        var ul=document.getElementById("showSectionUl");
                        nli.innerHTML=text.value;
                        ul.appendChild(nli);
                    }

                },
                "error":function(XMLHttpRequest, textStatus, errorThrown){
                    alert(XMLHttpRequest+" "+textStatus+" "+errorThrown);
                }
            });
        }
    </script>
</head>
<body>


<div style="width: 1000px; margin: 0 auto;">

    <div class="section_div" style="float: left;">
        <label>添加部门：</label><input type="text" id="addSectionText" name="section" style="size: 22px;"/>
        <input type="button" onclick="submitSection()" value="add" />

        <br/><label>部门列表：</label>
        <ul id="showSectionUl" class="list-group">
            <c:forEach items="${sessionScope.sections}" var="section">
                <c:if test="${section.sname!='BOSS'}">
                    <li class="list-group-item">${section.sname}</li>
                </c:if>
            </c:forEach>
        </ul>


    </div>
    <div class="section_div"  style="float: right;width: 600px;">
        <form action="${pageContext.request.contextPath}/findUsers" method="post">
            <label>查询员工信息：</label>
            <select name="sid">
                <c:forEach items="${sessionScope.sections}" var="section">
                    <c:if test="${section.sname!='BOSS'}">
                        <option value="${section.sid}">${section.sname}</option>
                    </c:if>
                </c:forEach>
            </select>&nbsp;&nbsp;&nbsp;
            <label>选择排序方式：</label>
            <select name="att">
                <option value="name">name</option>
                <option value="startDate">startData</option>
                <option value="salary">salary</option>

            </select>
            <select name="order">
                <option value="DESC">升序</option>
                <option value="ASC">降序</option>
            </select>
            <button type="submit" class="btn btn-info">查询</button>
        </form>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <c:if test="${!empty requestScope.users}">
                <tr>
                    <th>入职时间</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>薪水</th>
                </tr>
                <c:forEach items="${requestScope.users}" var="us">
                    <tr>
                        <td>${us.startDate}</td>
                        <td>${us.name}</td>
                        <td>${us.section.sname}</td>
                        <td>${us.salary}</td>
                    </tr>
                </c:forEach>
            </c:if>
        </table>
    </div>
</div>
</body>
</html>

